<template>
  <div>
    <el-container style="height: 600px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: white">
        <el-menu :default-openeds="['1']">

          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-postcard"></i>信息修改</template>
            <el-menu-item-group>

              <router-link class="alink" to="/showinfo">
                <el-menu-item index="1-1">
                  基本信息
                </el-menu-item>

              </router-link>

              <router-link class="alink" to="/infoeditor">
                <el-menu-item index="1-2">
                  信息修改
                </el-menu-item>
              </router-link>

              <router-link class="alink" to="/imageUp">
                <el-menu-item index="1-3">
                  头像修改
                </el-menu-item>
              </router-link>

              <router-link class="alink" to="/countcontrol">
                <el-menu-item index="1-4">
                  账号管理
                </el-menu-item>
              </router-link>


            </el-menu-item-group>

          </el-submenu>


          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-postcard"></i>文章管理</template>
            <el-menu-item-group>
              <router-link class="alink" to="/articlecontrol">
                <el-menu-item index="2-1">
                  文章管理
                </el-menu-item>
              </router-link>

            </el-menu-item-group>

          </el-submenu>


          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-edit"></i>文章书写
            </template>
            <el-menu-item-group>
              <router-link class="alink" to="/writearticle">
                <el-menu-item index="3-1">
                  文章书写
                </el-menu-item>
              </router-link>
            </el-menu-item-group>

          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-user"></i>关注的人
            </template>
            <el-menu-item-group>
              <router-link class="alink" to="/checkFollow">
                <el-menu-item index="3-1">
                  关注的人
                </el-menu-item>
              </router-link>
            </el-menu-item-group>

          </el-submenu>

        </el-menu>
      </el-aside>


      <el-container>
        <el-main>
          <div style="width: 80%;margin: 0 auto">
            <div style="width: 70%;margin-top: 5%">
              <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                       class="demo-ruleForm">
                <el-form-item label="原始密码" prop="verify">
                  <el-input type="password" v-model="ruleForm.verify" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="修改密码" prop="pass">
                  <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认修改" prop="checkPass">
                  <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-main>
      </el-container>

    </el-container>

  </div>

</template>

<script>
import user from "@/store/user";

export default {
  name: "countcontrol",
  data() {
    var validateOriginPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入原始密码'));
      } else if (value.length <= 6) {
        callback(new Error("密码长度不能低于6"))
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (value.length <= 6) {
          callback(new Error("密码长度不能低于6"))
        }
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        pass: '',
        checkPass: '',
        verify: ''
      },
      rules: {
        verify: [
          {validator: validateOriginPass, trigger: 'blur'}
        ],
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {validator: validatePass2, trigger: 'blur'}
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {
      const userInfo = user.getters.getUser(user.state());
      var userId;
      if(userInfo===null)
        this.$message.warning("请先登录")
      else userId=userInfo.user.userID;
      this.$axios({
        method: 'post',
        url: '/user/changePwd',
        data: ({
          userID: userId,
          oldPwd: this.ruleForm.verify,
          newPwd: this.ruleForm.pass,
          checkPwd: this.ruleForm.checkPass
        })
      })
          .then(res => {
            if (res.data.code === 0) {
              this.$message.info("修改成功");
              this.$store.dispatch('clear');
              this.$store.state.isLogin = false;
              this.$router.push({path: '/login'})
            } else {
              this.$message.info("修改失败")
            }
          })
          .catch(err => {
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>

</style>
